<template>
	<p>
		<a-space style="float: right; margin-bottom: 20px">
			<a-button type="primary" @click="onAdd">新增</a-button>
		</a-space>
	</p>
	<a-table :columns="columns"
	         :dataSource="trainList"
	         :loading="loading"
	         :pagination="pagination"
	         @change="handleTableChange">
		<template #bodyCell="{ column, record }">
			<template v-if="column.dataIndex === 'operation'">
				<a-space>
					<a-popconfirm
						cancel-text="取消"
						ok-text="确认"
						title="确认删除该火车?" @confirm="onDelete(record)">
						<a style="color: red">删除</a>
					</a-popconfirm>
					<a @click="onEdit(record)">编辑</a>
					<a-popconfirm
						cancel-text="取消"
						ok-text="确认"
						title="确认生成该车次所有座位?" @confirm="generatorSeat(record)">
						<a>生成座位</a>
					</a-popconfirm>
				</a-space>
			</template>
			<template v-else-if="column.dataIndex === 'type'">
        <span v-for="item in TRAIN_TYPE_ARRAY" :key="item.code">
          <span v-if="item.code === record.type">
            {{ item.desc }}
          </span>
        </span>
			</template>
		</template>
	</a-table>
	<a-modal v-model:visible="visible" cancel-text="取消" ok-text="确认"
	         title="火车" @ok="handleOk">
		<a-form :label-col="{span: 5}" :model="train" :wrapper-col="{ span: 20 }">
			<a-form-item label="车次编号">
				<a-input v-model:value="train.code" :disabled="!!train.id"/>
			</a-form-item>
			<a-form-item label="车次类型">
				<a-select v-model:value="train.type" placeholder="请选择车次类型">
					<a-select-option v-for="item in TRAIN_TYPE_ARRAY" :key="item.code" :value="item.code">
						{{ item.desc }}
					</a-select-option>
				</a-select>
			</a-form-item>
			<a-form-item label="始发站">
				<station-select-view v-model="train.start"/>
			</a-form-item>
			<a-form-item label="始发站拼音">
				<a-input v-model:value="train.startPinyin" disabled/>
			</a-form-item>
			<a-form-item label="出发时间">
				<a-time-picker v-model:value="train.startTime" format="HH:mm:ss" placeholder="" value-format="HH:mm:ss"/>
			</a-form-item>
			<a-form-item label="终点站">
				<station-select-view v-model="train.end"/>
			</a-form-item>
			<a-form-item label="终点站拼音">
				<a-input v-model:value="train.endPinyin" disabled/>
			</a-form-item>
			<a-form-item label="到站时间">
				<a-time-picker v-model:value="train.endTime" format="HH:mm:ss" placeholder="" value-format="HH:mm:ss"/>
			</a-form-item>
		</a-form>
	</a-modal>
</template>

<script>
import {defineComponent, onMounted, ref, watch} from 'vue';
import {notification} from 'ant-design-vue';
import axios from 'axios';
import {pinyin} from 'pinyin-pro';
import StationSelectView from '@/components/station-select.vue';

export default defineComponent({
	name: 'train-view',
	components: {StationSelectView},
	setup(){
		/**
		 * 获取火车类型
		 */
		const TRAIN_TYPE_ARRAY = window.TRAIN_TYPE_ARRAY;
		/**
		 * 判断是否展示新增窗口
		 */
		const visible = ref(false);
		/**
		 * 火车列表
		 */
		const trainList = ref([]);
		/**
		 * 判断是否展示loading
		 */
		let loading = ref(false);

		/**
		 * 火车对象
		 */
		let train = ref({
			id: undefined,
			code: undefined,
			type: undefined,
			start: undefined,
			startPinyin: '',
			startTime: undefined,
			end: undefined,
			endPinyin: '',
			endTime: undefined,
			createTime: undefined,
			updateTime: undefined,
		});

		// 分页的三个属性名是固定的
		const pagination = ref({
			total: 0,
			current: 1,
			pageSize: 10,
		});

		/**
		 * 火车列表头
		 */
		const columns = [
			{
				title: '车次编号',
				dataIndex: 'code',
				key: 'code',
			},
			{
				title: '车次类型',
				dataIndex: 'type',
				key: 'type',
			},
			{
				title: '始发站',
				dataIndex: 'start',
				key: 'start',
			},
			{
				title: '始发站拼音',
				dataIndex: 'startPinyin',
				key: 'startPinyin',
			},
			{
				title: '出发时间',
				dataIndex: 'startTime',
				key: 'startTime',
			},
			{
				title: '终点站',
				dataIndex: 'end',
				key: 'end',
			},
			{
				title: '终点站拼音',
				dataIndex: 'endPinyin',
				key: 'endPinyin',
			},
			{
				title: '到站时间',
				dataIndex: 'endTime',
				key: 'endTime',
			},
			{
				title: '创建时间',
				dataIndex: 'createTime',
				key: 'createTime',
			},
			{
				title: '更新时间',
				dataIndex: 'updateTime',
				key: 'updateTime',
			},
			{
				title: '操作',
				dataIndex: 'operation'
			}
		];

		/**
		 * 监控始发地变化，自动填写站名拼音
		 */
		watch(() => train.value.start, () => {
			if(Tool.isNotEmpty(train.value.start)){
				train.value.startPinyin = pinyin(train.value.start, {toneType: 'none'}).replaceAll(' ', '');
			}else{
				train.value.startPinyin = '';
			}
		});
		/**
		 * 监控终点站变化，自动填写站名拼音
		 */
		watch(() => train.value.end, () => {
			if(Tool.isNotEmpty(train.value.end)){
				train.value.endPinyin = pinyin(train.value.end, {toneType: 'none'}).replaceAll(' ', '');
			}else{
				train.value.endPinyin = '';
			}
		});

		/**
		 * 页面完全刷新调用函数
		 */
		onMounted(() => {
			// 页面刚刷新调用获取乘车人列表方法
			handleQuery({
				page: 1,
				size: pagination.value.pageSize
			});
		});

		/**
		 * 点击新增按钮
		 */
		const onAdd = () => {
			// 清空乘车人对象
			train.value = {
				id: undefined,
				code: undefined,
				type: undefined,
				start: undefined,
				startPinyin: '',
				startTime: undefined,
				end: undefined,
				endPinyin: '',
				endTime: undefined,
				createTime: undefined,
				updateTime: undefined,
			};
			// 展示新增乘车人窗口
			visible.value = true;
		};

		/**
		 * 点击编辑按钮
		 */
		const onEdit = (record) => {
			// 回显数据
			train.value = window.Tool.copy(record);
			// 打开编辑窗口
			visible.value = true;
		};

		/**
		 * 新增或编辑火车
		 */
		const handleOk = () => {
			// 判断新增火车还是更新火车
			if(train.value.id){
				// 调用编辑火车接口
				axios.post('/business/admin/train/update', train.value).then((r) => {
					const {success, message} = r.data;
					// 判断请求是否成功
					if(success){
						notification.success({message: '更新火车成功！'});
						// 成功后关闭新增窗口
						visible.value = false;
						// 更新成功后重新请求火车列表
						handleQuery({
							page: pagination.value.current,
							size: pagination.value.pageSize
						});
					}else{
						notification.error({message: message});
					}
				});
			}else{
				// 调用新增火车接口
				axios.post('/business/admin/train/insert', train.value).then((r) => {
					const {success, message} = r.data;
					// 判断请求是否成功
					if(success){
						notification.success({message: '新增火车成功！'});
						// 成功后关闭新增窗口
						visible.value = false;
						// 新增成功后重新请求乘车人列表
						handleQuery({
							page: pagination.value.current,
							size: pagination.value.pageSize
						});
					}else{
						notification.error({message: message});
					}
				});
			}
		};

		/**
		 * 查询火车列表
		 */
		const handleQuery = (param) => {
			// 判断是否带分页参数，如果不带则赋值
			if(!param){
				param = {
					page: 1,
					size: pagination.value.pageSize
				};
			}
			// 显示loading图标
			loading.value = true;
			// 发送获取火车列表请求
			axios.get('/business/admin/train/select-list-page', {
				params: {
					page: param.page,
					size: param.size
				}
			}).then((r) => {
				// 请求结束后隐藏loading图标
				loading.value = false;
				const {success, message, content} = r.data;
				// 判断请求是否成功
				if(success){
					// 成功之后保存火车列表
					trainList.value = content.list;
					// 设置分页控件的值
					pagination.value.current = param.page;
					pagination.value.total = content.total;
				}else{
					notification.error({message: message});
				}
			});
		};

		/**
		 * 页面变化调用函数
		 */
		const handleTableChange = (pagination) => {
			// 设置分页
			handleQuery({
				page: pagination.current,
				size: pagination.pageSize
			});
		};

		/**
		 * 删除火车
		 */
		const onDelete = (record) => {
			axios.post('/business/admin/train/delete', {
				id: record.id,
			}).then((r) => {
				const {success, message} = r.data;
				if(success){
					notification.success({message: '删除成功！'});
					// 设置分页控件的值
					handleQuery({
						page: pagination.value.current,
						size: pagination.value.pageSize,
					});
				}else{
					notification.error({message: message});
				}
			});
		};

		/**
		 * 生成座位
		 */
		const generatorSeat = (record) => {
			axios.post(`/business/admin/train-seat/generator-seat/${record.code}`).then((r) => {
				const {success, message} = r.data;
				if(success){
					notification.success({message: '生成座位成功！'});
				}else{
					notification.error({message: message});
				}
			});
		};

		return {
			train,
			visible,
			trainList,
			pagination,
			columns,
			handleTableChange,
			handleQuery,
			loading,
			onAdd,
			handleOk,
			onEdit,
			onDelete,
			generatorSeat,
			TRAIN_TYPE_ARRAY
		};
	},
});
</script>